图片放大在区域内拖拽，正常比例是不能拖拽

最新推荐文章于 2020-12-24 15:45:05 发布
最新推荐文章于 2020-12-24 15:45:05 发布
阅读量923 收藏
点赞数
分类专栏： 其他 文章标签： 拖拽 限定拖拽范围 图片拖住 图片放大缩小拖拽 放大缩小
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smz8023/article/details/101367036
版权

最近遇到一个需求：
1.图片可拖拽，但是在正常比例下，是拖拽不动的
2.当图片放大后，图片的大小大于盒子的大小时，此时可拖拽
要求：1.放大后的图片的边缘不能在盒子内出现，意思就是只能在盒子内拖动（图片的左边缘不能小于盒子的左边缘）
写了一下午：
主要代码如下：
第一张：点击时记录位置。
移动时限制大小
在这里插入图片描述
第二张：滑动滚轮的时候判断图片偏移量，不要让图片的边框出现在div内，意思不要露出背景色来
在这里插入图片描述

第三张：使用
在这里插入图片描述

bugdemon8023
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
div在一个区域拖动
weixin_30684743的博客
09-11 1145
<script> window.onload = function() { var oDiv = document.getElementById('div1'); // var oParent = document.getElementById('app'); var oParent = document...
图片在网页区域内拖动的JS代码
05-12
摘要:脚本资源,Ajax/JavaScript,图片拖动　图片在网页指定区域内拖动的JS代码，类似放大的效果，但有本质上的区别。如截图所示，两张图片分别在作者规定的两个方框内拖动，互不干扰，智能判断图片大小，如果拖动到了...
图片拖拽缩小放大
短发女孩
08-23 372
图片拖拽缩小放大
点击图片放大可拖拽
weixin_40601606的博客
12-24 127
点击图片放大可拖拽 <div> <ul> <li> <img class="comment_pics" width="50px" height="50px" src="img/ez.jpeg" /> <p>号牌号码<span>豫Areceived</span></p> <p>号牌号码<span>豫Areceived</span></p>
从操作系统拖拽图片到指定区域进行预览
weixin_30832143的博客
11-11 117
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #demo2 { margin: 20p...
div拖拽
GB511846886的博客
03-16 154
分析逻辑关于该过程有一下3个动作 1、点击 2、移动 3、释放鼠标 1、点击时获得点击下去的一点的坐标（盒子的top，left），去除默认事件。 2、移动时不断改变盒子的坐标。（移动的dom目标应该为document不然容易被甩出去）。 3、鼠标释放。清除document的时间。还有改变位置。 4、注意如果鼠标在点击目标时速度太快离开了目标，要马上纠正。 写了个简...
jQuery点击图片拖动放大查看效果
04-07
当用户点击图片时，图片会以放大镜的形式显示，用户可以通过鼠标拖动来查看图片的不同区域，这种交互方式增强了用户的浏览体验，使得查看细节变得更加方便。 要实现这一功能，开发者需要做以下步骤： 1. **引入...
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小js资源
09-12
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小文件，在每个压缩包是一个，打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里，记事本打开...
qml 拖拽图片
06-11
本示例“qml 拖拽图片”聚焦于如何利用QML实现在一个区域内自由拖动图片的功能，这对于创建具有高度互动性的桌面或移动应用来说非常有用。以下将详细介绍如何使用QML实现这个功能。 首先，我们需要了解QML中的关键...
高仿微信图片放大拖动浏览，自定义ImageView
07-22
4. **边界处理**：为了防止图片在放大后超出屏幕范围，我们需要在每次缩放和平移后检查图片的边界，确保其始终在ImageView的可视区域内。这可以通过比较Matrix得到的图像坐标和ImageView的边界进行判断。 5. **嵌套...
HTML5实现图片拖动，旋转，放大，拉伸等特效
11-04
HTML5实现图片拖动，旋转，放大，拉伸等特效 效果详情参考http://www.xwcms.net/webAnnexImages/fileAnnex/20131031/91857/index.html
基于JQuery的图片放大缩小，拖动
02-15
基于JQuery的图片放大缩小功能，以及拖动等相关功能。
图片放大缩小拖拽查看Demo
03-16
改写的jquery插件PhotoSwipe写的一个图片放大缩小拖拽查看的Demo，大部分代码来源于CSDN博主 黑夜的星辰 https://my.csdn.net/cq371356447
javascript图片预览（滚动放大缩小和拖动查看）
11-24
打开html可直接查看例子，例子中图片url写死的，是一个网络图片，如果该图片不见了可直接更改那个地址。 完全是自己写的滚动和拖动行为
很实用的图片点击放大可拖动展示效果
05-28
图片点击放大效果，放大后可拖动，类似DZ论坛图片点击放大效果，亲测可用！
图片里放大缩小拖动
生如夏花的博客
08-22 333
app: compile 'com.github.chrisbanes.photoview:library:+' compile 'com.github.chrisbanes:PhotoView:2.1.3' 工程里： allprojects { repositories { jcenter() maven {url "https://jitpac
在一个指定的div中拖拽
weixin_30275415的博客
09-12 111
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1 { width: 100px; he...
组织结构可以任意拖动到指定位置div
09-25
用js控制生成了一个组织结构图，再设置这个组织结构可以任意拖动到指定位置，下面有个不错的示例，大家可以参考下
手势拖动. 约束图片边缘 .限制拉动范围
weixin_30265103的博客
08-10 137
@implementation WDEnterLineViewController{ float xx; float yy; UIImageView *bgImgView; } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setu...
在MATLAB中，放大显示matlab输出图像局部区域，放大区域可以随意在原图像拖动，相应的放大区域会显示出来，同时显示放大区域和源图像。
最新发布
05-30
可以使用MATLAB中的imtool函数来完成这个任务。使用imtool函数可以方便地在一个窗口中同时显示源图像和放大区域，还可以通过拖动放大区域来实时更新放大区域的内容。具体操作步骤如下： 1. 加载图像：使用imread函数加载需要显示的图像，例如： ``` img = imread('example.jpg'); ``` 2. 打开imtool窗口：使用imtool函数打开一个新的窗口来显示图像，例如： ``` imtool(img); ``` 3. 放大区域：在imtool窗口中，使用鼠标左键框选一个需要放大的区域。 4. 拖动放大区域：使用鼠标左键在放大区域内拖动，可以实时更新放大区域的内容。 5. 调整放大倍数：使用imtool窗口中的工具栏可以调整放大倍数，也可以使用鼠标滚轮来放大或缩小显示的图像。 6. 关闭imtool窗口：关闭imtool窗口时，可以选择是否保存当前的放大区域和显示设置。 注意：在使用imtool函数时，需要保证图像是以灰度或RGB格式加载的，如果是其他格式的图像，需要先进行转换。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值